<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<!--引入jquery-->
<script type="text/javascript"
	src="static/js/jquery-1.12.4.js"></script>
<link rel="stylesheet" type="text/css"
	href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
	href="static/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
	rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/new_file.css">
<link rel="stylesheet"
	href="css/font-awesome-4.7.0/css/font-awesome.min.css" />
<link
	href="static/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css"
	rel="stylesheet" media="screen" />
<!-- 引入分页插件 -->
<link rel="stylesheet" type="text/css"
	href="static/paginationjs-master-2.1.0/dist/pagination.css" />

<!--引入bootstrap脚本--->
<script type="text/javascript"
	src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- 引入分页插件 -->
<script type="text/javascript"
	src="static/paginationjs-master-2.1.0/dist/pagination.min.js"></script>
<style type="text/css">
body {
	margin: 0px;
	padding: 0px;
}

#main {
	height: 1531px;
	width: 1508px;
}

#div1 {
	height: 77px;
	background-color: #232629;
}

#div2 {
	height: 35px;
	background-color: #E8E8E8;
}

#div3 {
	height: 1178px;
	background-color: #E8E8E8;
}

#div4 {
	float: left;
	margin-left: 173px;
	height: 1106px;
	width: 220px;
	background-color: #FFFFFF;
}

#div5 {
	float: left;
	margin-left: 11px;
	height: 1029px;
	width: 772px;
	background-color: #FFFFFF;
}
/* a超链接下划线处理*/
.buju {
	text-decoration: none;
}

a:hover {
	color: #83DF8A;
}

span:hover {
	color: white;
}

input {
	background-color: #5C5F68;
	color: #5C5F68;
	height: 23px;
}

#lx3-2 {
	float: left;
	margin-left: 10px;
	width: 50%;
	height: 94%;
	margin-top: 1px;
	background-color: white;
}

.lx3-2-dropt1 {
	width: 100%;
	height: 2px;
	background-color: #DBD6D3;
	margin-top: 20px;
}

.lx3-2-dropt2 {
	width: 100%;
	height: 50px;
	padding-top: 5px;
	padding-left: 20px;
}

.lx3-2-dropt3 {
	width: 100%;
	height: 5px;
	background-color: #E54D12;
}
</style>
</head>
<body link="#AAAAAA" alink="#83DF8A" vlink="#827775">
	<div id="main">
		<div id="div1">
			<div class="herd0">
				<img src="img/捕获.PNG" / height="50px" width="105px"">
			</div>
			<div class="herd1">
				<ul>
					<li><a href=""><span>首页</span></a></li>
					<li><a href=""><span>课程设计</span></a></li>
					<li><a href=""><span>老师加盟</span></a></li>
					<li><a href=""><span>学员感言</span></a></li>
					<li><a href=""><span></span></a></li>
					<li><a href=""><input type="text" name="wenben" size="18"></a>
					</li>
					<li><a href=""><span>学习记录</span></a></li>
				</ul>
			</div>
		</div>
		<div id="div2"></div>
		<div id="div3">
			<div id="div4">
				<div
					style="background-color:; width: 220px; height: 230px; margin-top: 8px;"
					align="center">
					<div id="xioakeai">
						<img src="img/41323.PNG" / width="120px" height="120px"> <br />
						<font size="2">username</font>
					</div>
					<font size="2">余额：</font><font size="4">￥1.2亿</font><font size="2">&nbsp;元</font>
					<br /> <a href="#"><img src="img/捕 获.PNG" /></a>
				</div>
				<div style="width: 220px; height: 31px; background-color: #DDDDDD;">
					<p style="margin-left: 50px; padding-top: 4px;">
						<b>会员中心</b>
					</p>
				</div>
				<div
					style="width: 220px; height: 31px; background-color: #FFFFFF; padding-top: 6px; a: hover{color: #83DF8A;">
					<i class="fa fa-user-o" style="margin-left: 50px;"></i><a
						class="buju" href="#">&nbsp;&nbsp;个人中心</a>

				</div>
				<div style="width: 220px; height: 31px; padding-top: 6px;">
					<i class="fa fa-home" style="margin-left: 50px;"></i><a
						class="buju" href="#">&nbsp;&nbsp;我的主页</a>
				</div>
				<div style="width: 220px; height: 31px; background-color: #DDDDDD;">
					<p style="margin-left: 50px; padding-top: 4px; margin-top: 5px;">
						<b>我的订单</b>
					</p>
				</div>
				<div style="width: 220px; height: 31px;" id="mmd01">
					<i class="fa fa-file-text-o"
						style="margin-left: 50px; padding-top: 6px;"></i><a class="buju"
						href="#">&nbsp;&nbsp;我的订单</a>
				</div>
				<div style="width: 220px; height: 31px;">
					<i class="fa fa-file-zip-o"
						style="margin-left: 50px; padding-top: 6px;"></i><a class="buju"
						href="#">&nbsp;&nbsp;充值记录</a>
				</div>
				<div style="width: 220px; height: 31px; background-color: #DDDDDD;">
					<p style="margin-left: 50px; padding-top: 4px;">
						<b>学习管理</b>
					</p>
				</div>
				<div style="width: 220px; height: 31px;">
					<i class="fa fa-window-restore" style="margin-left: 50px;"></i><a
						class="buju" href="#">&nbsp;&nbsp;我的在线课程</a>
				</div>
				<div style="width: 220px; height: 31px;">
					<i class="fa fa-folder-open-o" style="margin-left: 50px;"></i><a
						class="buju" href="#">&nbsp;&nbsp;我收藏的课程</a>
				</div>
				<div>
					<i class="fa fa-user-circle" style="margin-left: 50px;"></i><a
						class="buju" href="#">&nbsp;&nbsp;我关注的老师</a>
				</div>
				<div style="width: 220px; height: 31px; background-color: #DDDDDD;">
					<p style="margin-left: 50px; padding-top: 4px;">
						<b>学习心得</b>
					</p>
				</div>
				<div style="width: 220px; height: 31px;">
					<i class="fa fa-book" style="margin-left: 50px;"></i><a
						class="buju" href="#">&nbsp;&nbsp;我的笔记</a>
				</div>
				<div style="width: 220px; height: 31px;">
					<i class="fa fa-question-circle" style="margin-left: 50px;"></i><a
						class="buju" href="#">&nbsp;&nbsp;我的提问</a>
				</div>
				<div style="width: 220px; height: 31px;">
					<i class="fa fa-list" style="margin-left: 50px;"></i><a
						class="buju" href="#">&nbsp;&nbsp;我的帖子</a>
				</div>
				<div style="width: 220px; height: 31px;">
					<i class="fa fa-edit" style="margin-left: 50px;"></i><a
						class="buju" href="#">&nbsp;&nbsp;我的评论</a>
				</div>
				<div style="width: 220px; height: 31px;">
					<i class="fa fa-map-o" style="margin-left: 50px;"></i><a
						class="buju" href="#">&nbsp;&nbsp;我的作业</a>
				</div>
				<div style="width: 220px; height: 31px; background-color: #DDDDDD;">
					<p style="margin-left: 50px; padding-top: 4px;">
						<b>购物车</b>
					</p>
				</div>
				<div style="width: 220px; height: 31px; padding-top: 8px;"
					id="mmd02">
					<i class="fa fa-gift" style="margin-left: 50px;"></i><a
						class="buju" href="#">&nbsp;&nbsp;我的购物车</a>
				</div>
				<div style="width: 220px; height: 31px; background-color: #DDDDDD;">
					<p style="margin-left: 50px; padding-top: 4px;">
						<b>个人资料</b>
					</p>
				</div>
				<div style="width: 220px; height: 31px;">
					<i class="fa fa-qrcode"
						style="margin-left: 50px; padding-top: 16px;"></i><a class="buju"
						href="#">&nbsp;&nbsp;基本资料</a>
				</div>
				<div style="width: 220px; height: 31px;">
					<i class="fa fa-cog" style="margin-left: 50px; padding-top: 16px;"></i><a
						class="buju" href="#">&nbsp;&nbsp;安全设置</a>
				</div>
				<div style="width: 220px; height: 31px;">
					<i class="fa fa-bell-o"
						style="margin-left: 50px; padding-top: 16px;"></i><a class="buju"
						href="#">&nbsp;&nbsp;提醒设置</a>
				</div>
				<div style="width: 220px; height: 31px;">
					<i class="fa fa-user-o"
						style="margin-left: 50px; padding-top: 16px;"></i><a class="buju"
						href="#">&nbsp;&nbsp;修改密码</a>
				</div>


			</div>



			<div id="div5" ">
				<div style="height: 38px; width: 772px; margin-left: 6px;">
					<font size="2">当前位置：<a class="buju" href="#">会员中心</a> <我的订单>
						<a class="buju" href="#">购买学院的订单</a></font>
				</div>
				<div style="width: 732px; height: 33px; margin: 0px 20px 0px 20px;">
					<div
						style="margin-left: 20px; width: 182px; height: 33px; float: left; background-color: #232629;"
						align="center">
						<a class="buju" href="#"><font size="2" color="white">购买学院的订单</font></a>
					</div>
					<div
						style="width: 182px; height: 33px; float: left; background-color: #EEEEEE;"
						align="center">
						<font size="2"><a class="buju" href="#">购买单个教程的订单</a> </font>
					</div>
					<div
						style="width: 181px; height: 33px; float: left; background-color: #EEEEEE;"
						align="center">
						<font size="2"><a class="buju" href="#">购买套餐的订单</a></font>
					</div>

				</div>
				<div
					style="width: 732px; height: 41px; margin: 0px 20px 0px 20px; border-color: #E8F5B2;">
					<font size="2" color="#FF6600">提示：</font><font size="2">亲，如果您付款成功后还不能观看视频，这是因为系统出现延迟，稍候就会正常，请不要取消订单。</font>
				</div>
				<div style="width: 732px; height: 9px; margin: 0px 20px 0px 20px;"
					align="center">
					<!-- <div
						style="width: 495px; height: 32px; float: left; background-color: #DDDDDD; padding-top: 6px;">
						<font size="2">教程</font>
					</div>
					<div
						style="width: 112px; height: 32px; float: left; background-color: #DDDDDD; padding-top: 6px;"
						align="center">
						<font size="2">订单金额</font>
					</div>
					<div
						style="width: 125px; height: 32px; float: left; background-color: #DDDDDD; padding-top: 6px;"
						align="center">
						<font size="2">交易状态</font>
					</div>
 -->


				</div>

				<!-- <div style="width: 772px; height: 30px;"></div> -->
                <div id="lx000" style="margin-top: -40px;">
					<table width="90%;" align="center">
						<thead>
							<tr height="100px">
								
								<td width="100px"><font size="3">商品号</font></td>
								<td width="100px"><font size="3">商品图片</font></td>
								<td width="100px"><font size="3">课程名称</font></td>
								<td width="100px"><font size="3">课程价格</font></td>
							
							</tr>
						</thead>
						<tbody id="lx111">
						</tbody>
					</table>
				</div>
			</div>
			

			<!-- <div id="lx3-2">
				<p>当前位置：会员中心>我的购物车</p>
				<div class="lx3-2-dropt1">
					<font size="5">
				</div>
				<div class="lx3-2-dropt2">
					<font size="5">我的购物车</font><font size="3">温馨提示
						：产品是否购买成功，以最终下单为准，请尽快结算</font>
				</div>
				<div class="lx3-2-dropt3">
					<font size="5">
				</div>
				<div id="lx000" style="margin-top: 30px;">
					<table width="90%;" align="center">
						<thead>
							<tr height="100px">
								<th width="100px"><input type="checkbox"
									style="width: 20px; height: 20px;" /><font size="3">全选</font></th>
								<th width="100px"><font size="3">商品号</font></th>
								<th width="100px"><font size="3">商品图片</font></th>
								<th width="100px"><font size="3">课程名称</font></th>
								<th width="100px"><font size="3">课程价格</font></th>
								<th width="100px"><font size="3">管理</font></th>
							</tr>
						</thead>
						<tbody id="lx111">
						</tbody>
					</table>
				</div>
				<div id="jiesuan"  style="margin-top:100px; width:70px; height:40px;margin-left:550px;" >
				<button type="button" id="lxmoney" value="jiesuan" onclick="javascript:window.location.href='index.jsp'">结算
				</div>
			</div> -->
		</div>
	<!-- 	<!-- 模态框（Modal）
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">确认删除</h4>
					</div>

					<div class="modal-body" style="height: 130px;">是否确认删除</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-primary" onclick="okreply()">确定</button>
					</div>

				</div>
			</div>
			/.modal
		</div> -->
		<script type="text/javascript">
		$(document).ready(function() {
			
						var Host_id =
<%=request.getSession().getAttribute("Host_id")%>
	;
						
	var c_id =<%=request.getSession().getAttribute("c_id")%>;
/* 						alert("11"); */

						$
								.ajax({
									url : "FingAction",
									type : "post",
									data : {
										"Host_id" : Host_id,
										"c_id":c_id
									},
									dataType : "json",
									success : function(data, textStatus, jqXHR) {
										//回掉函数的dom操作
										alert(data);
										if (data != null && data != "") {
											var strHtml = "";
											$
													.each(
															data,
															function(index,
																	eachVal) {
																strHtml += "<tr height='100px'>";

																
																strHtml += "<td width='100px'><font size='3'>"
																strHtml += eachVal.c_id;
																strHtml += "</font></th>";
																strHtml += "<td width='70px'><img src='"
																strHtml += eachVal.c_img;
																//	alert("eachVal.c_img:"+ eachVal.c_img);
																strHtml += "' width='50px' height='50px'>"
																strHtml += "</td>"
																strHtml += "<td width='70px'><font size='2'>"
																strHtml += eachVal.c_name;
																strHtml += "</font></td>";
																strHtml += "<td width='100px'><font size='3'>"
																strHtml += eachVal.c_price;
																strHtml += "</font></td width='100px'>";
						
																strHtml += "</tr>";
															});
											$("#lx000").html(strHtml);
										}
									},
									error : function(data) {
										alert("请求失败");
									}
								})
					})
</script>
</body>
</html>